import classNames from 'classnames';
import { useEffect, useState } from 'react';

import Image from '../Image';
import closeSvg from './close.svg';
import classes from './index.module.less';

type Props = {
  show?: boolean;
  className?: string;
  onClose?: () => void;
  children?: React.ReactNode;
  close?: React.ReactNode;
};

const Dialog: React.FC<Props> = ({
  show = false,
  onClose = () => {},
  children,
  className,
  close,
}) => {
  const [open, setState] = useState(show);

  useEffect(() => {
    if (show) {
      setState(show);
    } else {
      setTimeout(() => {
        setState(show);
      }, 250);
    }
  }, [show]);

  if (!open) {
    return null;
  }
  return (
    <div className={classNames(classes.dialog, !show && classes.hidden)} onClick={onClose}>
      <div className={classNames(classes.box, className)} onClick={(e) => e.stopPropagation()}>
        {children}
      </div>
      {close !== undefined ? (
        close
      ) : (
        <Image className={classes.close} src={closeSvg} style={{ width: 30, height: 30 }} />
      )}
    </div>
  );
};

export default Dialog;
